<template>
<div class="item">
    <div class="text-center h-8 leading-8">企业榜单</div>
    <div class="content">
      <p class="text-t666 font-bold">
        {{ title }}
      </p>
      <div class="detail-out-tag absolute right-0 top-1/2 transform -translate-y-1/2 bg-gradient-to-b from-red-500 to-red-400">
        <div class="detail-tag absolute z-20 -left-1 top-1 bg-gradient-to-b from-red-400 to-yellow-500">
          <div class="tag-content">查看详情</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LevelLinkCard',
  props: {
    title: {
      type: String,
      default: ''
    },
  },
}
</script>

<style lang="scss" scoped>
  .item {
    @apply px-2 pb-4 border border-gray-50 shadow-md;

    .content {
      min-height: 40px;
      @apply relative flex flex-col justify-center pr-20;
    }
    .detail-tag,
    .detail-out-tag {
      height: 2.5rem;
      @apply  w-20  text-center text-white ;

      .tag-content {
        @apply flex flex-col justify-center h-full text-xs;
      }
    }

    .detail-tag::before,
    .detail-out-tag::before
    {
      content: "";
      width: 0;
      border-top: 0.25rem solid transparent;
      border-right: 0.25rem solid transparent;
      border-bottom: 0.25rem solid #fff;
      border-left: 0.25rem solid #fff;
      @apply absolute left-0 bottom-0 block;
    }

    .detail-tag::after,
    .detail-out-tag::after
    {
      content: "";
      width: 0;
      border-top: 0.25rem solid #fff;
      border-right: 0.25rem solid #fff;
      border-bottom: 0.25rem solid transparent;
      border-left: 0.25rem solid transparent;
      @apply absolute right-0 top-0 block;
    }

    .detail-tag::after{
      content: "";
      width: 0;
      border-top: 0.25rem solid rgb(239, 68, 68);
      border-right: 0.25rem solid rgb(239, 68, 68);
      border-bottom: 0.25rem solid transparent;
      border-left: 0.25rem solid transparent;
      @apply absolute right-0 top-0 block;
    }
  }
</style>